<template>
  <div class="broadcast-container">
    <Swiper
      v-if="broadcasts.length > 0"
      :autoplay="{
        delay: 1000,
      }"
      :loop="true"
      direction="vertical"
      :height="32"
      :modules="modules"
      @swiper="setControlledSwiper"
    >
      <SwiperSlide v-for="(item, index) in broadcasts" :key="index">
        <v-dialog v-model="item.dialog">
          <template v-slot:activator="{ props: activatorProps }">
            <li v-bind="activatorProps" class="broadcast-item text-title">
              {{ item.noticeTitle }}
            </li>
          </template>
          <v-card>
            <v-card-title> {{ item.noticeTitle }}</v-card-title>
            <div class="ql-editor" v-html="item.noticeContent"></div>
            <v-card-actions>
              <v-spacer></v-spacer>
              <v-btn text @click="item.dialog = false"> 确定 </v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </SwiperSlide>
    </Swiper>
  </div>
</template>
<script setup>
function setControlledSwiper(swiper) {
  swiper.update();
}
</script>
<script>
import { getNotices } from "../api/notice";
import { Autoplay } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/vue";
export default {
  name: "broad-cast",
  components: { Swiper, SwiperSlide },
  props: {
    duration: {
      type: Number,
      default: 1000,
    },
  },

  data() {
    return {
      broadcasts: [],
      modules: [Autoplay],
    };
  },
  created() {
    this.init();
  },
  methods: {
    async init() {
      try {
        await this.setNotices();
      } catch (error) {
        console.log(error);
      }
    },

    async setNotices() {
      try {
        const res = await getNotices();
        this.broadcasts = res.rows.map((item) => ({ ...item, dialog: false }));
        return Promise.resolve();
      } catch (error) {
        console.log(error);
        return Promise.reject(error);
      }
    },
  },
};
</script>
<style scoped lang="scss">
$height: 32px;

.broadcast-container {
  width: 100%;
  height: $height;

  line-height: $height;
  color: #eeeeee;

  overflow: hidden;
  font-size: 14px;

  .broadcast-list {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    transform: translateY(0px);

    .broadcast-item {
      list-style: none;
    }
  }

  .official-container {
    width: 320px;
    height: 320px;
    box-shadow: 1px 1px 5px rgba(255, 255, 255, 0.5) inset;
  }
}
</style>
